<template>
	<view>
		<hx-navbar ref="hxnb" :config="config">
			<block slot="left">
				<view class="a1">
					<text class="a2">应用</text>
				</view>
			</block>
		</hx-navbar>
		<view class="a8">
			<image src="https://zhxy-mini.oss-cn-hangzhou.aliyuncs.com/7e794cc8c4698d037e312543da6092a.png" class="a9">
			</image>
			<image src="https://zhxy-mini.oss-cn-hangzhou.aliyuncs.com/9b68d524cb40467f2af4578bb774d38.png" class="a9">
			</image>
		</view>
		<view class="b5">
			<text class="b6">推荐应用</text>
			<text class="b7">根据您最近浏览和办理的应用为您推荐</text>
		</view>
		<view class="b8">
			<view class="b9" v-for="(item,index) in recomarr" :key="index">
				<image :src="item.icon" class="c1"></image>
				<text class="c2">{{item.title}}</text>
				<text class="c3">{{item.value}}</text>
				<text class="c4">{{item.view}}浏览</text>
				<image src="../../static/add.png" class="c5"></image>
			</view>
		</view>
		<l-tabs :list="tabarr" keyName="title" :lineShow="true" :lineCrude="6" :activeSize="18" linePlace="26px"
			activeTextColor="#333" bold=600 textColor="#333" lineColor="linear-gradient(to right, #98F0BC 30%, #98F0BC)"
			@choose="tabChange">
		</l-tabs>
		<view class="d1">
			<view class="d2" id="a1">课程服务</view>
			<view class="d3">
				<view class="d4" v-for="(item,index) in newarr" :key="index">
					<image :src="item.icon" class="d5"></image>
					<view class="d6">{{item.title}}</view>
				</view>
			</view>
			<view class="d7" id="a2">校园卡服务</view>
			<view class="d3">
				<view class="d4" v-for="(item,index) in arr2" :key="index">
					<image :src="item.icon" class="d5"></image>
					<view class="d6">{{item.title}}</view>
				</view>
			</view>
			<view class="d7" id="a3">报修服务</view>
			<view class="d3">
				<view class="d4" v-for="(item,index) in arr3" :key="index">
					<image :src="item.icon" class="d5"></image>
					<view class="d6">{{item.title}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: {
					back: false,
					fixed: true,
					leftSlot: true,
					search: {
						placeholder: ''
					}
				},
				recomarr: [{
						title: '成绩查询',
						icon: 'https://zhxy-mini.oss-cn-hangzhou.aliyuncs.com/cec4b314fe7329e364646fb61dfa957.png',
						value: '查询当前及历史成绩',
						view: '200'
					},
					{
						title: '图书借阅',
						icon: 'https://zhxy-mini.oss-cn-hangzhou.aliyuncs.com/eb421804168effaeead7c6c53f1d50a.png',
						value: '查看图书借阅记录',
						view: '200'
					},
					{
						title: '网上缴费',
						icon: 'https://zhxy-mini.oss-cn-hangzhou.aliyuncs.com/c2bebb92244c1752a3236930bd7ea12.png',
						value: '自助网上缴费',
						view: '200'
					}
				],
				tabarr: [
					{
						title: '校园卡服务'
					},
					{
						title: '教学服务'
					},
					{
						title: '报修服务'
					}
				],
				tab: 0,
				newarr:[{
					title:'课表',
					icon:'https://zhxy-mini.oss-cn-hangzhou.aliyuncs.com/systemicon/936f56ba2907dd1b38e0afa3c8b0937.png'
				},
				{
					title:'我的课程',
					icon:'https://zhxy-mini.oss-cn-hangzhou.aliyuncs.com/systemicon/f5caf4acfc9228f8ac87423da52dc2e.png'
				},
				{
					title:'我的成绩',
					icon:'https://zhxy-mini.oss-cn-hangzhou.aliyuncs.com/systemicon/1a511be1539543c4fefbebfe9b876dc.png'
				},
				{
					title:'学生选课',
					icon:'https://zhxy-mini.oss-cn-hangzhou.aliyuncs.com/systemicon/cdf30ec3d1e45163d4c2073ae6104ef.png'
				}],
				arr2:[{
					title:'校园卡信息',
					icon:'https://zhxy-mini.oss-cn-hangzhou.aliyuncs.com/systemicon/6f0df4c8b0619a873494f88d523f3f1.png'
				},
				{
					title:'余额查询',
					icon:'https://zhxy-mini.oss-cn-hangzhou.aliyuncs.com/systemicon/7cb99c4ec406648b4f50d650ee724a3.png'
				},
				{
					title:'挂失',
					icon:'https://zhxy-mini.oss-cn-hangzhou.aliyuncs.com/systemicon/804f97787e3257c342356777753d4e3.png'
				},
        {
          title:'充值缴费',
          icon:'https://zhxy-mini.oss-cn-hangzhou.aliyuncs.com/systemicon/804f97787e3257c342356777753d4e3.png'
        }],
				arr3:[{
					title:'维修报修',
					icon:'https://zhxy-mini.oss-cn-hangzhou.aliyuncs.com/systemicon/eb9e2b0ca4763bd9f6a85ad76883534.png'
				},
				{
					title:'我的报修订单',
					icon:'https://zhxy-mini.oss-cn-hangzhou.aliyuncs.com/systemicon/d0c5d022fae2cee3fda8ac7cd9d102a.png'
				},
				]

			}
		},
		methods: {
			tabChange({
				index,
				item
			}) {
				this.getElementScollTop("a"+(index+1))
			},
			 //获取元素离页面顶部的距离
			getElementScollTop(element) {
			    const query = uni.createSelectorQuery()
				console.log(element)
			    query.select('#'+element).boundingClientRect((data) => {
			        let pageScrollTop = Math.round(data.top)
			        uni.pageScrollTo({
			            scrollTop: pageScrollTop-400, //滚动的距离
			            duration: 0, //过渡时间
			        })
			      }).exec()
			    },

		}
	}
</script>

<style>
	page {
		background-color: #FFF;
	}

	.a1 {
		padding-left: 35upx;
	}

	.a2 {
		font-size: 18px;
		font-weight: 700;
	}

	.a8 {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-top: 40upx;
		padding-left: 20upx;
		padding-right: 20upx;
	}

	.a9 {
		height: 160upx;
		width: 320upx;
		border-radius: 30upx;
	}

	.b5 {
		display: flex;
		flex-direction: column;
		padding-left: 30upx;
		margin-top: 30upx;
	}

	.b6 {
		font-size: 18px;
		font-weight: 600;
	}

	.b7 {
		font-size: 20upx;
		color: darkgray;
		margin-top: 10upx;
		letter-spacing: 1upx;
	}

	.b8 {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-top: 70upx;
		padding-left: 30upx;
		padding-right: 30upx;
		margin-bottom: 30upx;
	}

	.b9 {
		display: flex;
		flex-direction: column;
		border-radius: 30upx;
		padding-top: 30upx;
		align-items: center;
		height: 300upx;
		width: 220upx;
		box-shadow: 0px -5px 10px 0px #F3F2F8,
			-6px 0px 6px 0px #F3F2F8,
			6px 0px 6px 0px #F3F2F8,
			0px 5px 19px 0px #F3F2F8;
	}

	.c1 {
		width: 70upx;
		height: 70upx;
	}

	.c2 {
		font-size: 26upx;
		margin-top: 10upx;
	}

	.c3 {
		font-size: 18upx;
		color: darkgray;
	}

	.c4 {
		font-size: 20upx;
		color: #666666;
		margin-top: 20upx;
	}

	.c5 {
		height: 50upx;
		width: 50upx;
		margin-top: 30upx;
	}

	.d1 {
		
		margin-top: 30upx;
		
	}

	.d2 {
		padding-right: 40upx;
		padding-left: 40upx;
		font-weight: 600;
		font-size: 26upx;
		color: #333;
		margin-top: 30upx;
	}

	.d3 {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}


	.d4 {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		margin-top: 30upx;
	}

	.d5 {
		height: 60upx;
		width: 60upx;
	}

	.d6 {
		font-size: 22upx;
		margin-top: 15upx;
	}
	.d7{
		
			padding-right: 40upx;
			padding-left: 40upx;
			font-weight: 600;
			font-size: 26upx;
			margin-top: 50upx;
			color: #333;
		
	}
</style>
